<template>
    <div>
        
       <div>
           <!-- 轮播图 -->
           <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
               <van-swipe-item v-for="imgs in info.pics" :key="imgs.id">
                   <img :src='imgs'>
               </van-swipe-item>
           </van-swipe>

           <!-- 店铺名称 -->
           <div>
           <h2>{{info.name}}</h2> 
           <van-rate v-model="info.score" :count="5" color="#ffcc33"/><span>{{info.score}}分</span> <span>日销售{{info.sellCount}}单</span>
           <van-divider />
           </div>
            <!-- 起送价 -->
            <van-grid :column-num="3" :border=false class="van_griditem">
                <van-grid-item><p>起送价</p><span>{{info.deliveryPrice}}元</span></van-grid-item>
                <van-grid-item><p>商家配送</p><span>{{info.deliveryTime}}元</span></van-grid-item>
                <van-grid-item><p>配送方</p> <span>{{info.description}}</span> </van-grid-item>
            </van-grid>

            <van-grid :column-num="1" class="bulletin">
                <van-grid-item>
                    <h3>活动&公告</h3>
                    <p>{{info.bulletin}}</p>
                    <span>虎年大吉！工作顺利</span>
                </van-grid-item>
            </van-grid>
       </div>
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import{$_seller} from '@/api/order'
    @Component
    export default class Merchant extends Vue {
        info:any={}
        // 生命周期
        created():void{
            $_seller().then((res)=>{
                this.info=res.data.data
                console.log('ddd',this.info)
            })
        }
    }
</script>

<style scoped lang="scss">
    .my-swipe .van-swipe-item {
    width: 98%;
    height: 150px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    background-color: #39a9ed;
    img{
        width: 100%;
    }
  }
  .van_griditem{
      p{
          color: #999999;
      }
  }
  .bulletin{
      background: #f4f5f7;
      p{
          color: #ea3a0f;
      }
  }
</style>